<script setup lang="ts">
import { useRouter } from "vue-router";
import { useRoute } from 'vue-router';

import type { SkeletonProps } from "vant";
const route = useRoute()
const router = useRouter()

// console.log(route.query);


// 返回上一级
function onClickLeft() {
  router.push("/user");
}
function detClick() {
  router.push('/detail')
}
</script>
<template>
  <div class="box">
    <!-- 头部导航栏 -->
    <header class="header">
      <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="onClickLeft" />
    </header>
    <!-- 搜索框 -->
    <div class="search">
      <van-search placeholder="搜索" />
    </div>
    <!-- 标签页 -->
    <div class="label">
      <van-tabs duration="0">
        <van-tab title="已确认" name="a">
          <van-skeleton @click="detClick" :animate="false">
            <template #template>
              <div :style="{ display: 'flex', width: '100%' }">
                <img src="../../assets/bieshu.jpg" alt="">
                <div :style="{ flex: 1, marginLeft: '16px' }">
                  <p class="p1">
                    <span class="s1">拱北华山别墅</span>
                    <span class="s2">已确认</span>
                  </p>
                  <p>珠海﹒3居3床6人﹒123平米</p>
                  <h1></h1>
                  <p class="p2">
                    <span class="s3">2019-10-12 21:00:00</span>
                    <span class="s4">￥600</span>
                  </p>
                </div>
              </div>
            </template>
          </van-skeleton>
        </van-tab>
        <van-tab title="待支付" name="b">
          <van-skeleton :animate="false">
            <template #template>
              <div :style="{ display: 'flex', width: '100%' }">
                <img src="../../assets/seahome.jpeg" alt="">
                <div :style="{ flex: 1, marginLeft: '16px' }">
                  <p class="p1">
                    <span class="s1">大理靠海民宿</span>
                    <span class="s2">已确认</span>
                  </p>
                  <p>小普陀﹒1居1床2人﹒60平米</p>
                  <h1></h1>
                  <p class="p2">
                    <span class="s3">2019-10-12 21:00:00</span>
                    <span class="s4">￥900</span>
                  </p>
                </div>
              </div>
            </template>
          </van-skeleton>
        </van-tab>
        <van-tab title="退款中" name="c">
          <van-skeleton :animate="false">
            <template #template>
              <div :style="{ display: 'flex', width: '100%' }">
                <img src="../../assets/xian.jpeg" alt="">
                <div :style="{ flex: 1, marginLeft: '16px' }">
                  <p class="p1">
                    <span class="s1">西安民宿</span>
                    <span class="s2">已确认</span>
                  </p>
                  <p>长安区﹒2居2床4人﹒99平米</p>
                  <h1></h1>
                  <p class="p2">
                    <span class="s3">2019-10-12 21:00:00</span>
                    <span class="s4">￥800</span>
                  </p>
                </div>
              </div>
            </template>
          </van-skeleton>
        </van-tab>
        <van-tab title="全部订单" name="d">
          <van-skeleton :animate="false">
            <template #template>
              <div :style="{ display: 'flex', width: '100%' }">
                <img src="../../assets/chengdu.jpeg" alt="">
                <div :style="{ flex: 1, marginLeft: '16px' }">
                  <p class="p1">
                    <span class="s1">成都民宿</span>
                    <span class="s2">已确认</span>
                  </p>
                  <p>武侯区﹒1居1床2人﹒123平米</p>
                  <h1></h1>
                  <p class="p2">
                    <span class="s3">2019-10-12 21:00:00</span>
                    <span class="s4">￥1600</span>
                  </p>
                </div>
              </div>
            </template>
          </van-skeleton>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<style scoped lang="scss">
.van-skeleton {
  margin-top: 5px;
}

img {
  width: 94px;
  height: 94px;
  border-radius: 10px;
}

.p1 {
  display: flex;
  justify-content: space-between;
}

.p1>.s2 {
  color: gray;
}

.p2 {
  display: flex;
  justify-content: space-between;
}

.p2>.s3 {
  color: gray;
}

.p2>.s4 {
  font-size: 15px;
  color: orange;
}
</style>

